<template>
	<view class="bg">
		<navbar title="订单中心" :isBack="true"></navbar>
		<view class="" style="padding: 0 30rpx;margin-top: 58rpx;">
			<view class="" style="display: flex;align-items: center;margin: 0 26rpx;">
				<view class="" style="font-weight: bold;font-size: 32rpx;">
					{{Info.nick_name}}
				</view>
				<view class=""
					style="margin-left: 20rpx;background: linear-gradient( 133deg, #F5D738 0%, #FFA438 100%);width: 80rpx;height: 32rpx;display: flex;justify-content: center;align-items: center;color: white;font-size: 20rpx;border-radius: 8rpx;">
					<span v-if="Info.rank == 1">代理</span>
					<span v-if="Info.rank == 2">销售</span>

				</view>
			</view>
			<view class=""
				style="background-image: url('/static/order/bg.png');background-size: cover;padding: 30rpx 40rpx;margin: 30rpx 26rpx 0 26rpx;">
				<view class="" style="display: flex;justify-content: space-between;align-items: center;">
					<view class="">
						<view class="" style="display: flex;align-items: center;" @tap="agent">
							<span style="font-size: 24rpx;color: #5A5A5A;">我的代理</span>
							<u-icon name="arrow-right" size="20"></u-icon>
						</view>
						<view class="" style="font-size: 56rpx;font-weight: bold;margin-top: 15rpx;">
							{{Info.dl_num}}
						</view>
					</view>
					<view @tap="invite" class=""
						style="width: 176rpx;height: 52rpx;background-color: #405EEC;color: white;font-size: 24rpx;display: flex;justify-content: center;align-items: center;border-radius: 72rpx;">
						<image src="../../static/order/person.png" style="width: 28rpx;height: 28rpx;"
							mode="aspectFill"></image>
						<span style="margin-left: 10rpx;">邀请代理</span>
					</view>
				</view>
			</view>
			<view class=""
				style="width: 100%;height: 180rpx;background-color: white;border-bottom-left-radius: 10rpx;border-bottom-right-radius: 10rpx;padding: 36rpx 66rpx;display: flex;justify-content: space-between;align-items: center;box-shadow: 0rpx 8rpx 8rpx 0rpx #DEE4F4;">
				<view class="">
					<view class="" style="color: #5A5A5A;font-size: 24rpx;">
						总业绩(元)
					</view>
					<view class="" style="margin-top: 20rpx;font-size: 48rpx;font-weight: bold;">
						{{Info.achievement}}
					</view>
				</view>
				<view class="">
					<view class="" style="color: #5A5A5A;font-size: 24rpx;">
						本月业绩(元)
					</view>
					<view class="" style="margin-top: 20rpx;font-size: 48rpx;font-weight: bold;">
						{{Info.month_achievement}}
					</view>
				</view>
			</view>
			<view class=""
				style="display: flex;justify-content: space-between;align-items: center;margin-top: 48rpx;margin-bottom: 30rpx;">
				<view class="" style="font-size: 32rpx;font-weight: bold;">
					关联订单
				</view>
				<view @tap="arrOrder" class=""
					style="border: 1rpx solid #BEBEBE;width: 108rpx;height: 40rpx;display: flex;justify-content: center;align-items: center;color: #5A5A5A;font-size: 20rpx;border-radius: 32rpx;">
					查看更多
				</view>
			</view>
			<view class=""   v-for="item in Info.order"
				style="margin-bottom:20rpx;padding: 25rpx;background-color: white;border-radius: 10rpx;width: 100%;">
				<view class=""
					style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 20rpx;border-bottom: 1rpx solid #F9F9F9;">
					<view class="" style="display: flex;align-items: center;">
						<image src="../../static/order/time.png" style="width: 28rpx;height: 28rpx;" mode="aspectFill">
						</image>
						<span style="margin-left: 10rpx;color: #535353;font-size: 24rpx;">{{item.create_time}}</span>
					</view>
					<view class="" style="font-size: 24rpx;">
						归属：{{item.name}}
					</view>
				</view>
				<view class="" style="margin-top: 20rpx;display: flex;">
					<view class="">
						<image :src="item.goods_cover" style="width: 92rpx;height: 92rpx;border-radius: 10rpx;"
							mode="aspectFill"></image>
					</view>
					<view class="" style="margin-left: 20rpx;width: 100%">
						<view class="">
							{{item.goods_name}}
						</view>
						<view class=""
							style="margin-top: 24rpx;display: flex;justify-content: space-between;align-items: center;width: 100%;">
							<view class="" style="color: #9A9A9A;font-size: 26rpx;">
								{{item.mobile}}
							</view>
							<view class="" style="font-weight: bold;">
								￥{{item.total_price}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="Info.order.length <= 0" style="width: 100%;background-color: #F4F4F8;display: flex;justify-content: center;align-items: center;flex-direction: column;height: 900rpx;">
				<image src="/static/image/nodata.png" style="width: 167rpx;height: 96rpx;" mode=""></image>
				<view class="" style="color: #999999;">
					暂无数据
				</view>
			</view>
		</view>

	</view>


</template>

<script setup lang="ts">
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	import { orderInfo } from '@/service/api/index'
	import tools from '@/utils/tools'
	const Info = ref({
		order:[]
	}) as any;

	onLoad(() => {
		getData()
	})
	const getData = async () => {
		const res = await orderInfo("");
		Info.value = res.msg
	}
	//我的代理
	const agent = () => {

		tools.navTo('/pagesA/order/agentList')
	}
	//关联订单
	const arrOrder = () => {
		tools.navTo('/pagesA/order/arrOrder')
	}
	//邀请代理
	const invite = () => {
		tools.navTo('/pagesA/order/invite')
	}
	 
</script>

<style scoped lang="scss">
	.bg {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #D1DFFF 0%, #FAFAFA 50%);
	}

	:deep(.u-navbar-fixed) {
		background-color: rgba(255, 255, 255, 0) !important;
	}
</style>